<template>
	<el-container>
		<el-container>
			<el-main class="nopadding">
				<el-container>
					<el-header>
						<div class="left-panel">
							<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0"
								@click="batch_del"></el-button>
						</div>
						<div class="right-panel">
							<el-date-picker v-model="date" type="daterange" value-format="YYYY-MM-DD"
								range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
								@change="changeDate"></el-date-picker>
						</div>
					</el-header>

					<el-main class="nopadding">
						<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe
							:hideDo="true">
							<el-table-column type="selection" width="50"></el-table-column>
							<!-- <sc-table-column label="序号" type="index"></sc-table-column> -->
							<el-table-column label="用户名" prop="username" width="100"></el-table-column>
							<el-table-column label="说明" prop="description" width="150"></el-table-column>
							<el-table-column label="请求地址" prop="url" min-width="350"></el-table-column>
							<el-table-column label="模块" prop="system" width="100"></el-table-column>
							<!-- <el-table-column label="用户" prop="username" width="100"></el-table-column> -->
							<el-table-column label="客户端IP" prop="ip" width="120"></el-table-column>
							<el-table-column label="花费时间(毫秒)" prop="spendTime" width="120"
								align="center"></el-table-column>
							<el-table-column label="调用时间" prop="startTime" width="150"></el-table-column>
							<el-table-column label="日志时间" prop="createTime" width="150"></el-table-column>
							<el-table-column label="是否成功" prop="startTime" width="100" align="center">
								<template #default="scope">
									<el-tag v-if="scope.row.success" type="success">成功</el-tag>
									<el-tag v-else type="danger">失败</el-tag>
								</template>
							</el-table-column>
						</scTable>
					</el-main>
				</el-container>
			</el-main>
		</el-container>
	</el-container>

	<el-drawer v-model="infoDrawer" title="日志详情" :size="600" destroy-on-close>
		<info ref="info"></info>
	</el-drawer>
</template>

<script>
	import info from './info'

	export default {
		name: 'log',
		components: {
			info,
		},
		data() {
			return {
				selection: [],
				infoDrawer: false,
				date: [],
				apiObj: this.$API.system.log.list,
				searchData: {
					startDate: "",
					endDate: ''
				}
			}
		},
		methods: {

			upsearch() {

			},
			changeDate(e) {
				if (e) {
					this.searchData.startDate = e[0]
					this.searchData.endDate = e[1]
				} else {
					this.searchData.startDate = ''
					this.searchData.endDate = ''
				}

				this.$refs.table.upData(this.searchData)
			},
			rowClick(row) {
				this.infoDrawer = true
				this.$nextTick(() => {
					this.$refs.info.setData(row)
				})
			},
			//表格选择后回调事件
			selectionChange(selection) {
				this.selection = selection
			},
			//批量删除
			async batch_del() {
				var confirmRes = await this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
					type: 'warning',
					confirmButtonText: '删除',
					confirmButtonClass: 'el-button--danger'
				}).catch(() => {})

				if (!confirmRes) {
					return false
				}

				var ids = this.selection.map(v => v.id)
				let id = ids.join(",")

				const res = this.$API.system.log.delete.post({
					id: id
				})
				if (res) {
					this.$message.success("操作成功")
					this.$refs.table.removeKeys(ids)
					//this.$refs.table.upData()
				}
			},
		}
	}
</script>

<style>
</style>